<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Analytics</title>
        <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
            body {padding: 20px 50px;}
            a {display: inline-block; padding-right: 20px;}
            .result {
                width: 900px;
                min-height: 100px;
                padding: 5px;
                margin: 10px 0;
                line-height: normal;
                border: 1px solid #133133;
                color: #3b707d;
                font-size: 14px;
                font-family: "Courier New", Courier, monospace;
                background: #fbfff4;
            }
            .cfg {
                width: 900px;
                min-height: 60px;
                padding: 5px 0;
                margin: 5px 0;
            }
            .f-row {
                margin: 5px 0;
            }
            .f-row label {
                display: inline-block;
                width: 80px;
                height: 24px;
                line-height: 24px;
                text-align: right;
                font-size: 16px;
                color: #00B7FF;
            }
            .f-row input {
                width: 400px;
                height: 24px;
                line-height: 24px;
                border: none;
                border-bottom: 1px solid #000000;
            }
            .f-row input.short {
                width: 80px;
            }
        </style>
    </head>
    <body>
        <h3>Analytics Demo</h3>

        <div class="cfg">
            <fieldset>
                <legend>配置信息</legend>
                <div class="f-row">
                    <label for="ip">IP:</label>
                    <input type="text" name="ip" value="http://localpiwik.com/" id="ip"/>
                </div>
                <div class="f-row">
                    <label for="idSite">idSite:</label>
                    <input type="text" name="idSite" value="1" id="idSite"/>
                </div>
                <div class="f-row">
                    <label for="token_auth">token_auth:</label>
                    <input type="text" name="token_auth" value="7917f2596f8bb70c954893f200ba6274" id="token_auth"/>
                </div>
                <div class="f-row">
                    <label for="pid">pid:</label>
                    <input type="text" name="pid" value="2001" id="pid"/>
                </div>
                <div class="f-row">
                    <label for="period">period:</label>
                    <input type="text" name="period" value="day" id="period"/>
                </div>
                <div class="f-row">
                    <label for="date">date:</label>
                    <input type="text" name="date" value="today" id="date"/>
                </div>
                <div class="f-row">
                    <label for="city">city:</label>
                    <input type="text" name="city" value="1" id="city"/>
                </div>
                <div class="f-row">
                    <label for="action">action:</label>
                    <select id="action" name="action">
                        <option value="pvisit" selected>pvisit</option>
                        <option value="pdistr">pdistr</option>
                        <option value="goal">goal</option>
                    </select>
                    idGoal: <input class="short" type="text" name="idGoal" value="1" id="idGoal"/>
                    act: <input class="short" type="text" name="act" value="fav" id="act"/>
                    type: <input class="short" type="text" name="type" value="user" id="type"/>
                </div>
            </fieldset>
        </div>

        <div>
            <a href="#" id="tokenauthTest">ME统计接口token_auth测试</a>
            <a href="#" id="analyticsTest">ME统计接口测试</a>
            <div id="resultTest" class="result">

            </div>
        </div>

        <ul>
            <li>
                <a href="#" class="analytics" method="VisitorInterest.getNumberOfVisitsPerVisitDuration">VisitorInterest.getNumberOfVisitsPerVisitDuration</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitorInterest.getNumberOfVisitsPerPage">VisitorInterest.getNumberOfVisitsPerPage</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitorInterest.getNumberOfVisitsByDaysSinceLast">VisitorInterest.getNumberOfVisitsByDaysSinceLast</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitorInterest.getNumberOfVisitsByVisitCount">VisitorInterest.getNumberOfVisitsByVisitCount</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitsSummary.getVisits">VisitsSummary.getVisits</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitsSummary.get">VisitsSummary.get</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitsSummary.getActions">VisitsSummary.getActions</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitsSummary.getSumVisitsLength">VisitsSummary.getSumVisitsLength</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitTime.getVisitInformationPerLocalTime">VisitTime.getVisitInformationPerLocalTime</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitTime.getVisitInformationPerServerTime">VisitTime.getVisitInformationPerServerTime</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitTime.getByDayOfWeek">VisitTime.getByDayOfWeek</a>
            </li>
            <li>
                <a href="#" class="analytics" method="VisitFrequency.get">VisitFrequency.get</a>
            </li>
            <li>
                <a href="#" class="analytics" method="Actions.get">Actions.get</a>
            </li>
            <li>
                <a href="#" class="analytics" method="Actions.getPageUrls">Actions.getPageUrls</a>
            </li>
            <li>
                <a href="#" class="analytics" method=""></a>
            </li>
        </ul>

        <script type="text/javascript">
            $(function(){
                function getAnalytics(){
                    var params = {
                        format: 'json',
                        module: 'API'
                    };
                    var obj = {};
                    var ip = $('#ip').val();
                    var idSite = $('#idSite').val();
                    var token_auth = $('#token_auth').val();
                    if (ip == '') {
                        alert('请输入主机IP');
                        return false;
                    }
                    if (idSite == '') {
                        alert('请输入idSite');
                        return false;
                    }
                    if (token_auth == '') {
                        alert('请输入token_auth');
                        return false;
                    }
                    if (ip.substr(ip.length - 1) != '/') {
                        ip += '/';
                    }
                    obj.host = ip;
                    params.idSite = idSite;
                    params.token_auth = token_auth;
                    obj.params = params;
                    return obj;
                }

                function merge(){
                    if (arguments.length > 0) {
                        var obj = {};
                        //注：相同名称的字段，取先传递的对象的字段
                        for (var i = 0; i < arguments.length; i ++) {
                            var arg = arguments[i];
                            if (arg && typeof(arg) == 'object') {
                                for (var key in arg) {
                                    if (!obj.hasOwnProperty(key) && arg.hasOwnProperty(key)) {
                                        obj[key] = arg[key];
                                    }
                                }
                            }
                        }
                        return obj;
                    }
                    return null;
                }

                function getSegment(uid, pid) {
                    var segment = '';
                    if (uid) {
                        segment += "customVariableName1==uid;customVariableValue1==" + uid + ";";
                    }
                    if (pid) {
                        segment += "customVariableName2==pid;customVariableValue2==" + pid + ";";
                    }
                    if (segment == '') {
                        return null;
                    }
                    return {
                        segment: segment.substring(0, segment.length - 1)
                    };
                }

                function getCondition(period, date){
                    return {
                        period: period || 'day',
                        date: date || 'today'
                    }
                }

                $('a.analytics').on('click', function(){
                    var analytics = getAnalytics();
                    if (!analytics) {
                        return;
                    }
                    var params = merge(getCondition(), getSegment(null, 2001), analytics.params);
                    var $obj = $(this);
                    params.method = $obj.attr('method');
                    console.dir(params);
                    $.ajax({
                        url: analytics.host,
                        type: 'GET',
                        dataType: 'jsonp',
                        data: params,
                        success: function(data, status){
                            console.log('请求成功: ' + status);
                            console.log('data: ' + JSON.stringify(data));
                            $obj.siblings().remove();
                            $obj.after('<code>' + JSON.stringify(data) + '</code>');
                        },
                        error: function(xhr, status, err){
                            alert('请求失败: ' + status + (err && err.message ? ', ' + err.message : ''));
                        }
                    });
                });

                $("#analyticsTest").on('click', function(){
                    var analytics = getAnalytics();
                    if (!analytics) {
                        return;
                    }
                    var pid = $('#pid').val();
                    var period = $('#period').val();
                    var date = $('#date').val();
                    var city = $('#city').val() ? 1 : 0;
                    var action = $('#action').val();
                    var idGoal = $('#idGoal').val();
                    var act  =$('#act').val();
                    var type = $('#type').val();
                    if (action == 'goal') {
                        pid = null;
                    }
                    var params = {
                        action: action,
                        token_auth: analytics.params.token_auth,
                        idSite: analytics.params.idSite,
                        pid: pid,
                        period: period,
                        date: date,
                        city: city,
                        idGoal: idGoal,
                        act: act,
                        type: type
                        //language: 'zh-cn',  //中文
                        //pid: 2001,
                        //city: 1
                        //period: 'week',
                        //date: '2015-11-06'
                    };
                    $.ajax({
                        url: analytics.host + 'me/analytics.php',
                        type: 'GET',
                        dataType: 'text',
                        data: params,
                        success: function(data, status) {
                            console.log('请求成功: ' + status);
                            console.log('data: ' + data);

                            $("#resultTest").html(data);
                        },
                        error: function(xhr, status, err) {
                            alert('请求失败: ' + status + (err && err.message ? ', ' + err.message : ''));
                        }
                    });
                });

                $("#tokenauthTest").click(function(){
                    var analytics = getAnalytics();
                    if (!analytics) {
                        return;
                    }
                    $.ajax({
                        url: analytics.host + 'me/index.php',
                        type: 'POST',
                        dataType: 'text',
                        data: {username: 'admin', password: '123456'},
                        success: function(data, status) {
                            console.log('请求成功: ' + status);
                            console.log('data: ', data);

                            $("#resultTest").html(data);
                        },
                        error: function(xhr, status, err) {
                            alert('请求失败: ' + status + (err && err.message ? ', ' + err.message : ''));
                        }
                    });
                });
            });
        </script>
    </body>
</html>